<amplify-slot name="sign-up-header" [context]="context"></amplify-slot>

<form data-amplify-form (submit)="onSubmit($event)" (input)="onInput($event)">
  <amplify-federated-sign-in></amplify-federated-sign-in>
  <div class="amplify-flex amplify-authenticator__column">
    <div class="amplify-flex amplify-authenticator__column">
      <amplify-slot name="sign-up-form-fields" [context]="context">
        <amplify-sign-up-form-fields></amplify-sign-up-form-fields>
      </amplify-slot>

      <amplify-error *ngIf="authenticator.error">
        {{ authenticator.error }}
      </amplify-error>
    </div>

    <amplify-slot name="sign-up-button" [context]="context">
      <button
        [isDisabled]="
          authenticator.isPending || authenticator.hasValidationErrors
        "
        amplify-button
        variation="primary"
        fullWidth="true"
        type="submit"
      >
        {{ createAccountText }}
      </button>
    </amplify-slot>
  </div>
</form>

<amplify-slot name="sign-up-footer" [context]="context"> </amplify-slot>
